<!-- 页面 -->
<template>
	<s-layout navbar="normal" onShareAppMessage style="background-color: #ffffff" tabbar="/pages/index/monitorTask"
	          title="监测商品">
		<view class="cicon-notice"
		      style="padding: 10px;
	          margin: 5px;
	          width: 90%;
	          background-color: #F39800;
	          border-radius: 10px; color: #FFFFFF;">
			<text>点击图片或标题进入详情, 进一步操作</text>
		</view>
		<su-sticky bgColor="#fff">
			<su-tabs
					:current="state.currentTab"
					:list="state.monitorTaskMap"
					:scrollable="true"
					@change="onTabsChange"
			></su-tabs>
		</su-sticky>
		<s-empty
				v-if="state.pagination.total === 0"
				icon="/static/order-empty.png"
				text="暂无任务"
		></s-empty>
		<view v-if="state.pagination.total > 0">
			<view>
				<view
						v-for="item in state.pagination.data"
						:key="item.id"
						class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20"
				>
					<s-monitor-good
							class=""
							:tag-style="tagStyle"
							size="lg"
							:data="item"
							:topRadius="10"
							:bottomRadius="10"
							@click="sheep.$router.go('/pages/goods/index', { id: item.productId, platform: 0 })"
					>
					</s-monitor-good>
				</view>
			</view>
		</view>

		<!-- 底部 -->
		<su-fixed :isInset="false" :val="70" bottom placeholder>
			<view style="padding-left: 40rpx; padding-right: 40rpx">
				<!--刷新-->
				<button class="generic-btn" @tap="reloadData">
					<text class="btn-text">刷新</text>
				</button>
			</view>
		</su-fixed>

		<!-- 加载更多 -->
		<uni-load-more
				v-if="state.pagination.total > 0"
				:content-text="{
        contentdown: '上拉加载更多',
      }"
				:status="state.loadStatus"
				@tap="loadmore"
		/>
	</s-layout>
</template>

<script setup>
import {computed, reactive} from 'vue';
import {onLoad, onPullDownRefresh, onReachBottom, onShow} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import _, {clone} from 'lodash';

const buyNowStyle = {
	"mode": 0,
	"text": "查看详情",
	"color1": "#e16759",
	"color2": "#f5796f",
	"src": "\/storage\/decorate\/20221115\/4782356b4587dc4f4a218f2540a0bafc.png",
	"right": '20rpx',
	"bottom":"18rpx"
};

// 下单按钮样式
const buyStyle = computed(() => {
	if (buyNowStyle.mode === 1) {
		// button
		return {
			background: `linear-gradient(to right, ${buyNowStyle.color1}, ${buyNowStyle.color2})`,
		};
	}

	if (buyNowStyle.mode === 2) {
		// image
		return {
			width: '54rpx',
			height: '54rpx',
			background: `url(${sheep.$url.cdn(buyNowStyle.src)}) no-repeat`,
			backgroundSize: '100% 100%',
		};
	}
});

const tagStyle = {
	show: 1,
	src: ""
}

const pagination = {
	data: [],
	page: 0,
	total: 0,
	size: 5
};
// 数据
const state = reactive({
	monitorTaskList: [],
	monitorTaskMap: [],
	currentTab: 0,
	pagination: {
		data: [],
		page: 0,
		size: 10,
		total: 0,
		taskId: undefined,
	},
	loadStatus: '',
	// 页面参数
	options: {}
});


const userInfo = computed(() => sheep.$store('user').userInfo);

// 切换选项卡
function onTabsChange(e) {
	state.pagination.taskId = e.value;
	reloadData();
}

function onSearch(e) {
	console.log(e.value)
	state.pagination.data = []
	state.pagination.page = 1
	getRecentNewProduct()
}

// 获取任务列表
async function getRecentNewProduct() {
	state.loadStatus = 'loading';
	console.log(state.currentTabPack)
	console.log('size:', state.pagination)
	let res = await sheep.$api.miao.recentNewProduct({
		pageNum: state.pagination.page,
		pageSize: state.pagination.size,
		id: state.pagination.taskId,
	});
	const {rows, total} = res;
	console.log(res)
	state.pagination.data = _.uniqBy([...state.pagination.data, ...rows], 'productId');
	state.pagination.total = total
	// 判断是否还有下一页
	if (state.pagination.total <= state.pagination.data.length) {
		state.loadStatus = 'noMore';
	} else {
		state.loadStatus = 'more';
		state.pagination.page++;
	}
}

async function loadMonitorTask() {
	let res = await sheep.$api.miao.monitorTaskList({
		pageNum: 0,
		pageSize: 9999
	});
	const {rows} = res;
	console.log(res)
	state.monitorTaskList = rows
	// 设置TabMap
	state.monitorTaskMap = []
	state.monitorTaskList.forEach((item, index) => {
		let obj = {
			name: item.keyword,
			value: item.id
		}
		state.monitorTaskMap.push(obj)
	})
	if (state.options.taskId) {
		state.pagination.taskId = state.options.taskId
	} else {
		state.pagination.taskId = state.monitorTaskList[0].id
	}
	// 定位到当前的Tab索引
	state.monitorTaskList.forEach((item, index) => {
		if (item.id == state.pagination.taskId) {
			state.currentTab = index
			console.log(state.currentTab, '-----------------currentTab', index, '-----------------index', state.pagination.taskId, '-----------------taskId')
		}
	})
}

onLoad(async (options) => {
	console.log(options, '-----------------options')
	state.options = options
	await loadMonitorTask();
	await getRecentNewProduct();
});

onShow(  async () => {
	await loadMonitorTask();
	await getRecentNewProduct();
})

// 加载更多
function loadmore() {
	if (state.loadStatus !== 'noMore') {
		state.pagination.page++
		getRecentNewProduct();
	}
}

// 上拉加载更多
onReachBottom(() => {
	loadmore();
});

//下拉刷新
onPullDownRefresh(() => {
	getRecentNewProduct();
	setTimeout(function () {
		uni.stopPullDownRefresh();
	}, 800);
});

function reloadData() {
	state.pagination.data = []
	state.pagination.page = 0
	getRecentNewProduct()
}
</script>

<style lang="scss" scoped>
.score-img {
	width: 36rpx;
	height: 36rpx;
	margin: 0 4rpx;
}

.subscription-box {
	padding: 20rpx 24rpx;
	background: #f8f9fa;
	border-radius: 16rpx;
	margin: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

	.subscription-item {
		display: flex;
		align-items: center;
		padding: 18rpx 0;
		border-bottom: 1rpx solid #eee;

		&:last-child {
			border-bottom: none;
		}

		.icon {
			font-size: 36rpx;
			margin-right: 20rpx;
			color: #666;
		}

		.info-group {
			flex: 1;
			display: flex;
			flex-direction: column;

			.label {
				font-size: 30rpx;
				color: #999;
				line-height: 1.4;
			}

			.value {
				font-size: 30rpx;
				color: #333;
				font-weight: 500;
				line-height: 1.5;
			}
		}
	}
}

.tool-btn {
	width: 160rpx;
	height: 55rpx;
	background: white;
	font-size: 26rpx;
	border-radius: 30rpx;
	margin-right: 10rpx;

	&:last-of-type {
		margin-right: 0;
	}
}

.delete-btn {
	width: 160rpx;
	height: 55rpx;
	color: #F39800;
	background: #fee;
	border-radius: 30rpx;
	font-size: 26rpx;
	margin-right: 10rpx;
	line-height: normal;
	border: 1rpx solid #F39800;

	&:last-of-type {
		margin-right: 0;
	}
}

.apply-btn {
	width: 160rpx;
	height: 55rpx;
	border-radius: 30rpx;
	font-size: 26rpx;
	border: 2rpx solid #dcdcdc;
	line-height: normal;
	margin-left: 10rpx;

	&:last-of-type {
		margin-right: 0;
	}
}

.swiper-box {
	flex: 1;

	.swiper-item {
		height: 100%;
		width: 100%;
	}
}

.order-list-card-box {
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	box-shadow: 1px 1px 10px #d7d7d7;
	border-radius: 20rpx;
	padding: 2rpx;
	/* background-image: url("https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/01/140bd016097a894e33a18de250f41450b2WX20250114-221159@2x.png"); */
	background-size: 100% 15% !important;
	background-repeat: no-repeat;

	.tag {
		flex-shrink: 0;
		padding: 4rpx 10rpx;
		font-size: 24rpx;
		font-weight: 500;
		border-radius: 4rpx;
		color: #ffffff !important;
		background: #F39800;
	}


	.order-card-header {
		height: 80rpx;

		.order-no {
			font-size: 35rpx;
			font-weight: bold;
		}

		.order-state {
		}
	}

	.pay-box {
		.discounts-title {
			font-size: 24rpx;
			line-height: normal;
			color: #999999;
			margin-right: 20rpx;
		}

		.discounts-money {
			font-size: 24rpx;
			line-height: normal;
			color: #999;
			font-family: OPPOSANS;
		}

		.pay-color {
			color: #333;
		}
	}

	.order-card-footer {
		height: 100rpx;

		.more-item-box {
			padding: 20rpx;

			.more-item {
				height: 60rpx;

				.title {
					font-size: 26rpx;
				}
			}
		}

		.more-btn {
			color: $dark-9;
			font-size: 24rpx;
		}

		.content {
			width: 154rpx;
			color: #333333;
			font-size: 26rpx;
			font-weight: 500;
		}
	}
}

:deep(.uni-tooltip-popup) {
	background: var(--ui-BG);
}

.warning-color {
	color: #F39800;
}

.danger-color {
	color: #F39800;
}

.success-color {
	color: #52c41a;
}

.info-color {
	color: #999999;
}

:deep() {
	checkbox .wx-checkbox-input {
		border-radius: 50% !important;
		color: #ffffff !important;
	}

	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		color: #fff;
		background: var(--ui-BG-Main);
	}

	.wx-checkbox-input.wx-checkbox-input-checked {
		border: none !important;
	}

	.uni-checkbox-input {
		border-radius: 50% !important;
		color: #ffffff !important;
	}

	.uni-checkbox-input:hover {
		border-color: #d1d1d1 !important;
	}
}

:deep(.ui-fixed) {
	height: 72rpx;
}

.cart-box {
	width: 100%;

	.cart-header {
		height: 70rpx;
		background-color: #f6f6f6;
		width: 100%;
		position: fixed;
		left: 0;
		top: v-bind('sys_navBar') rpx;
		z-index: 1000;
		box-sizing: border-box;
	}

	.cart-footer {
		height: 100rpx;
		background-color: #fff;

		.pay-btn {
			display: inline-block;
			width: 60rpx;
			height: 70rpx;
			font-size: 28rpx;
			line-height: 28rpx;
			font-weight: 500;
			border-radius: 40rpx;
		}
	}

	.cart-content {
		margin-top: 70rpx;

		.goods-box {
			background-color: #fff;
		}
	}
}


.blur {
	backdrop-filter: blur(50px) !important;
	background-color: rgba(255, 255, 255, .32) !important;
}


.generic-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 24rpx;
	padding: 5rpx;
	background: linear-gradient(to right, #3E3A39, #3E3A39, #3E3A39);
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
	animation: fadeInUp 0.5s ease-out both;
	color: #ffffff;
	font-weight: bold;
	font-size: 30rpx;
}
</style>
